<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <title>徐汇区幼儿健康监测可视化</title>
    <link rel="stylesheet" href="{{env('APP_URL').BE_ADMIN}}/databoard/element-ui/unpkg.com_element-ui@2.15.14_lib_theme-chalk_index.css" />
    <link rel="stylesheet" href="{{env('APP_URL').BE_ADMIN}}/databoard/style/reset.css" />
    <link rel="stylesheet" href="{{env('APP_URL').BE_ADMIN}}/databoard/style/tools.css" />
    <link rel="stylesheet" href="{{env('APP_URL').BE_ADMIN}}/databoard/style/components.css" />
    <link rel="stylesheet" href="{{env('APP_URL').BE_ADMIN}}/databoard/style/page.css" />
    <link rel="stylesheet" href="{{env('APP_URL').BE_ADMIN}}/databoard/style/developData.css" />
    <!-- <link rel="stylesheet" href="./css/swiper.min.css"> -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" />
</head>

<style>
    .popContainer img {
        width: 50%;
    }

    .swiper-pagination .swiper-pagination-bullet {
        background: #66efff;
    }
    [v-cloak] {
        display: none;
    }
</style>

<body>
<div class="page" id="course-key-word" v-cloak>
    <!-- 标题 -->
    <div class="flex-center index-title" style="position: relative">
        <div class="log-title">
            <div class="logo-img"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/logo.png" /></div>
            <div>上海市徐汇区教育局</div>
        </div>
        <div class="m-d-s">
            <span> @{{YearMonthDay}} </span>
            <!-- 星期几 -->
            <span>@{{ weekDay}}</span>
            <!-- 时分秒 -->
            <span style="font-size: 24px">@{{HourMiniterSeconds}}</span>
        </div>
    </div>
    <div class="item-ul d-j-a">
        <div class="item-li item-li1">
            <div class="">园所数量</div>
            <div class="d-j-a num-div">
                <div class="num-name num-name1">@{{tabData.ysnum}}</div>
                <div class="yuanquan yuanquan1"></div>
            </div>
        </div>
        <div class="item-li item-li2">
            <div class="">分园数量</div>
            <div class="d-j-a num-div">
                <div class="num-name num-name2">@{{tabData.fynum}}</div>
                <div class="yuanquan yuanquan2"></div>
            </div>
        </div>
        <div class="item-li item-li3">
            <div class="">班级数量</div>
            <div class="d-j-a num-div">
                <div class="num-name num-name3">@{{tabData.bjnum}}</div>
                <div class="yuanquan yuanquan3"></div>
            </div>
        </div>
        <div class="item-li item-li4">
            <div class="">学生数量</div>
            <div class="d-j-a num-div">
                <div class="num-name num-name4">@{{tabData.xsnum}}</div>
                <div class="yuanquan yuanquan4"></div>
            </div>
        </div>
        <div class="item-li item-li5">
            <div class="">达标率</div>
            <div class="d-j-a num-div">
                <div class="num-name num-name5">@{{tabData.dbnum}}%</div>
                <div class="yuanquan yuanquan5"></div>
            </div>
        </div>
        <div class="item-li item-li6">
            <div class="">全区室外活动平均时长</div>
            <div class="d-j-a num-div">
                <div class="num-name num-name6">@{{Number(tabData.pjnum).toFixed(2)}}h</div>
                <div class="yuanquan yuanquan6"></div>
            </div>
        </div>
    </div>
    <div class="flex-between index-body">
        <!-- 左侧数据 -->
        <div class="flex-left-box">
            <div class="border-img">
                <div class="title-img" style="position: relative">
                    <img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/title-img.png" />
                    <div class="title-text">
                        学生性别分布 / 年级概览 &nbsp;(学生总数：@{{xszNum}})
                    </div>
                </div>
                <div class="echart-top-div">
                    <div style="width: 50%; position: relative">
                        <div id="echart-div1" style="height: 25vh"></div>
                        <div class="b-w-box">
                            <div><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/woman.png" /><span>&nbsp;女：@{{womanNum}} &nbsp;@{{womanNumP}}%</span></div>
                            <div><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/man.png" /><span>&nbsp;男：@{{this.manNum}} &nbsp;@{{manNumP}}%</span></div>
                        </div>
                    </div>
                    <div style="width: 50%">
                        <div id="echart-div2" style="height: 25vh"></div>
                    </div>
                </div>
            </div>
            <div class="border-img" style="height: 27vh">
                <div class="title-img" style="position: relative">
                    <img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/title-img.png" />
                    <div class="title-text">学生年龄分布 &nbsp;(学生总数：@{{aggData.zsNum}})</div>
                </div>
                <div id="echart-div3" style="height: 22vh"></div>
            </div>
            <div class="border-img" style="height: 20vh">
                <div class="title-img" style="position: relative">
                    <img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/title-img.png" />
                    <div class="title-text">体弱儿童数据 &nbsp;(学生总数：@{{weakData.zsNum}})</div>
                </div>
                <div id="echart-div4" style="height: 15vh"></div>
            </div>
        </div>

        <!-- 中间 -->
        <div class="flex-center-box" style="flex-direction: column;display: flex;justify-content: space-between;
    padding-bottom: 2vh;">

            <div class="map-div">
                <div style="position: relative;    margin: -2vh 0 0 25vh;
    height: 53vh;aspect-ratio: 227 / 505;">
                    <img class="map" src="{{env('APP_URL').BE_ADMIN}}/databoard/img/map.png" />
                    <div class="absolute" @mouseover="mouseoverYuandian('040121021',1)"  @mouseleave="aaa">
                        <div class="icon-hover">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 1 ? 'show':''" class="dialog" @click="handelGotoS('040121021')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/1.png' /></div>
                            <div class="diglog-right">
                                <div>科技幼儿园</div>
                                <div>幼儿总数：<span class="text-span">781</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute1">
                        <div class="icon-hover" @mouseover="mouseoverYuandian('040121022',2)" @mouseleave="aaa">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 2 ? 'show':''" class="dialog" @click="handelGotoS('040121022')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/2.png' /></div>
                            <div class="diglog-right">
                                <div>紫薇实验幼儿园</div>
                                <div>幼儿总数：<span class="text-span">688</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute3" @mouseover="mouseoverYuandian('040121001',3)" @mouseleave="aaa">
                        <div class="icon-hover">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 3 ? 'show':''" class="dialog" @click="handelGotoS('040121001')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/3.png' /></div>
                            <div class="diglog-right">
                                <div>机关建国幼儿园</div>
                                <div>幼儿总数：<span class="text-span">539</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute4"  @mouseover="mouseoverYuandian('040121047',4)" @mouseleave="aaa">
                        <div class="icon-hover">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 4 ? 'show':''" class="dialog" @click="handelGotoS('040121047')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/4.png' /></div>
                            <div class="diglog-right">
                                <div>阳光幼儿园</div>
                                <div>幼儿总数：<span class="text-span">284</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute5">
                        <div class="icon-hover" @mouseover="mouseoverYuandian('040121042',5)" @mouseleave="aaa">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 5 ? 'show':''" class="dialog" @click="handelGotoS('040121042')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/5.png' /></div>
                            <div class="diglog-right">
                                <div>上海幼儿园</div>
                                <div>幼儿总数：<span class="text-span">520</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute6">
                        <div class="icon-hover" @mouseover="mouseoverYuandian('040121062',6)" @mouseleave="aaa">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 6 ? 'show':''" class="dialog" @click="handelGotoS('040121062')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/6.png' /></div>
                            <div class="diglog-right">
                                <div>康沁幼儿园</div>
                                <div>幼儿总数：<span class="text-span">171</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute7">
                        <div class="icon-hover" @mouseover="mouseoverYuandian('040121040',7)" @mouseleave="aaa">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 7 ? 'show':''" class="dialog" @click="handelGotoS('040121040')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/7.png' /></div>
                            <div class="diglog-right">
                                <div>梅陇第二幼儿园</div>
                                <div>幼儿总数：<span class="text-span">164</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute8">
                        <div class="icon-hover" @mouseover="mouseoverYuandian('040121032',8)" @mouseleave="aaa">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 8 ? 'show':''" class="dialog" @click="handelGotoS('040121032')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/8.png' /></div>
                            <div class="diglog-right">
                                <div>东安一村幼儿园</div>
                                <div>幼儿总数：<span class="text-span">231</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute9">
                        <div class="icon-hover" @mouseover="mouseoverYuandian('040121034',9)" @mouseleave="aaa">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 9 ? 'show':''" class="dialog" @click="handelGotoS('040121034')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/9.png' /></div>
                            <div class="diglog-right">
                                <div>宛南实验幼儿园</div>
                                <div>幼儿总数：<span class="text-span">651</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute10">
                        <div class="icon-hover" @mouseover="mouseoverYuandian('040121024',10)" @mouseleave="aaa">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 10 ? 'show':''" class="dialog" @click="handelGotoS('040121024')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/10.png' /></div>
                            <div class="diglog-right">
                                <div>乐山幼儿园</div>
                                <div>幼儿总数：<span class="text-span">249</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute11">
                        <div class="icon-hover" @mouseover="mouseoverYuandian('040121019',11)" @mouseleave="aaa">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 11 ? 'show':''" class="dialog" @click="handelGotoS('040121019')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/11.png' /></div>
                            <div class="diglog-right">
                                <div>望德幼儿园</div>
                                <div>幼儿总数：<span class="text-span">563</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute12">
                        <div class="icon-hover" @mouseover="mouseoverYuandian('040121049',12)" @mouseleave="aaa">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 12 ? 'show':''" class="dialog" @click="handelGotoS('040121049')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/12.png' /></div>
                            <div class="diglog-right">
                                <div>果果幼儿园</div>
                                <div>幼儿总数：<span class="text-span">401</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute13">
                        <div class="icon-hover" @mouseover="mouseoverYuandian('040121031',13)" @mouseleave="aaa">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 13 ? 'show':''" class="dialog" @click="handelGotoS('040121031')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/13.png' /></div>
                            <div class="diglog-right">
                                <div>复旦附属徐汇实验幼儿园</div>
                                <div>幼儿总数：<span class="text-span">318</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute14">
                        <div class="icon-hover" @mouseover="mouseoverYuandian('040121003',14)" @mouseleave="aaa">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 14 ? 'show':''" class="dialog" @click="handelGotoS('040121003')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/14.png' /></div>
                            <div class="diglog-right">
                                <div>乌鲁木齐南路幼儿园</div>
                                <div>幼儿总数：<span class="text-span">631</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute15">
                        <div class="icon-hover" @mouseover="mouseoverYuandian('040121004',15)" @mouseleave="aaa">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 15 ? 'show':''" class="dialog" @click="handelGotoS('040121004')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/15.png' /></div>
                            <div class="diglog-right">
                                <div>五原路幼儿园</div>
                                <div>幼儿总数：<span class="text-span">354</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute16">
                        <div class="icon-hover" @mouseover="mouseoverYuandian('040121041',16)" @mouseleave="aaa">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 16 ? 'show':''" class="dialog" @click="handelGotoS('040121041')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/16.png' /></div>
                            <div class="diglog-right">
                                <div>梅陇幼儿园</div>
                                <div>幼儿总数：<span class="text-span">351</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute17">
                        <div class="icon-hover" @mouseover="mouseoverYuandian('040121023',17)" @mouseleave="aaa">
                            <div class="yuandian1"></div>
                            <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
                        </div>
                        <div :class="activeShow == 17 ? 'show':''" class="dialog" @click="handelGotoS('040121023')">
                            <div class="dialog-left"><img src='https://xqdp.xhedu.sh.cn/static/img/2024/17.png' /></div>
                            <div class="diglog-right">
                                <div>汇家幼儿园</div>
                                <div>幼儿总数：<span class="text-span">252</span>人</div>
                                <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                                <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="absolute18">
              <div class="icon-hover" @mouseover="mouseoverYuandian('040121062',6)" @mouseleave="aaa">
                <div class="yuandian1"></div>
                <div class="icon-div"><img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/icon.png" /></div>
              </div>
              <div :class="activeShow == 18 ? 'show':''" class="dialog" @click="handelGotoS('040121062')">
                <div class="dialog-left"><img :src=schoolData.img /></div>
                <div class="diglog-right">
                  <div>@{{schoolData.Name}}</div>
                  <div>幼儿总数：<span class="text-span">@{{schoolData.SNum}}</span>人</div>
                  <div>户外小时达标率:<span>@{{schoolData.dbl}}</span>%</div>
                  <div>户外2小时平均时长:<span>@{{schoolData.pjH}}</span>h</div>
                </div>
              </div>
            </div> -->

                </div>
            </div>

            <div class="module-radius">
                <div class="module-left-bottom-radius"></div>
                <div class="module-right-bottom-radius"></div>

                <div class="table-title">园所户外2小时达标率排行榜</div>
                <div class="course-left-table"></div>
                <div class="flex-start course-table-th">
                    <span>排名</span>
                    <span>园所名称名称</span>
                    <span>分园数量</span>
                    <span>学生人数</span>
                    <span>参与人数</span>
                    <span>达标人数</span>
                    <span>达标率</span>
                </div>
                <div class="swiper-container table-div" id="toDo-main" style="height: 24vh;">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide flex-start course-table-td" v-for="(item,index) in tableList">
                            <div style="width: 33.33%;">
                <span v-if="index < 3">
                  <img v-if="index == 0" src="{{env('APP_URL').BE_ADMIN}}/databoard/img/listIcon.png" />
                  <img v-else-if="index == 1" src="{{env('APP_URL').BE_ADMIN}}/databoard/img/listIcon2.png" />
                  <img v-else-if="index == 2" src="{{env('APP_URL').BE_ADMIN}}/databoard/img/listIcon1.png" />
                </span>

                                <span v-else>
                  @{{index +1}}
                </span>
                            </div>

                            <span>@{{item[6]}}</span>
                            <span>@{{item[7]}}</span>
                            <span>@{{item[8]}}</span>
                            <span>@{{item[9]}}</span>
                            <span>@{{item[10]}}</span>
                            <span>@{{Math.floor(item[11])}}%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <!-- 右边 -->
        <div class="flex-left-box">
            <div class="border-img" style="height: 38vh;">
                <div class="title-img" style="position: relative">
                    <img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/title-img.png" />
                    <div class="title-text">
                        视力低常率和户外活动两小时达标率对比
                    </div>
                </div>


                <div>
                    <div id="echart-div5" style="height: 32vh"></div>
                </div>

            </div>
            <div class="border-img" style="height: 38vh;">
                <div class="title-img" style="position: relative">
                    <img src="{{env('APP_URL').BE_ADMIN}}/databoard/img/title-img.png" />
                    <div class="title-text">
                        肥胖率和户外活动两小时达标率对比
                    </div>
                </div>


                <div>
                    <div id="echart-div6" style="height: 31vh"></div>
                </div>

            </div>
        </div>
    </div>

</div>
</div>

<script type="text/javascript" src="{{env('APP_URL').BE_ADMIN}}/databoard/js/jquery.min.js"></script>
<script type="text/javascript" src="{{env('APP_URL').BE_ADMIN}}/databoard/js/echarts.min.js"></script>
<script type="text/javascript" src="{{env('APP_URL').BE_ADMIN}}/databoard/js/echarts.min.js"></script>
<script type="text/javascript" src="{{env('APP_URL').BE_ADMIN}}/databoard/js/TweenLite.min.js"></script>
<script type="text/javascript" src="{{env('APP_URL').BE_ADMIN}}/databoard/js/axios.min.js"></script>
<script type="text/javascript" src="{{env('APP_URL').BE_ADMIN}}/databoard/js/api.js"></script>
<script type="text/javascript" src="{{env('APP_URL').BE_ADMIN}}/databoard/js/develop-data.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script> -->
<script src="{{env('APP_URL').BE_ADMIN}}/databoard/js/vue@2.7.14.js"></script>
<script src="{{env('APP_URL').BE_ADMIN}}/databoard/element-ui/unpkg.com_element-ui@2.15.14_lib_index.js"></script>
<script src="{{env('APP_URL').BE_ADMIN}}/databoard/js/swiper.min.js"></script>

<script>
    const vm = new Vue({
        el: "#course-key-word",
        data() {
            return {
                activeShow: 0,
                yesterday: "",
                YearMonthDay: "", //年月日数据
                HourMiniterSeconds: "", //时分秒数据
                myChart1: null,
                myChart2: null,
                myChart3: null,
                myChart4: null,
                myChart5: null,
                myChart6: null,


                List: ["大班", "中班", "小班"],
                tableList: [
                    // {
                    //   id: 1,
                    //   index: 1,
                    //   name: "科技幼儿园",
                    //   fynum: "4",
                    //   snum: "856",
                    //   cynum: "237",
                    //   dbnum: "225",
                    //   dbl: "94.9"
                    // },
                    // {
                    //   id: 2,
                    //   index: 2,
                    //   name: "科技幼儿园",
                    //   fynum: "4",
                    //   snum: "856",
                    //   cynum: "237",
                    //   dbnum: "225",
                    //   dbl: "94.9"
                    // },
                    // {
                    //   id: 3,
                    //   index: 3,
                    //   name: "科技幼儿园",
                    //   fynum: "4",
                    //   snum: "856",
                    //   cynum: "237",
                    //   dbnum: "225",
                    //   dbl: "94.9"
                    // },
                    // {
                    //   id: 4,
                    //   index: 4,
                    //   name: "科技幼儿园",
                    //   fynum: "4",
                    //   snum: "856",
                    //   cynum: "237",
                    //   dbnum: "225",
                    //   dbl: "94.9"
                    // },
                    // {
                    //   id: 5,
                    //   index: 5,
                    //   name: "科技幼儿园",
                    //   fynum: "4",
                    //   snum: "856",
                    //   cynum: "237",
                    //   dbnum: "225",
                    //   dbl: "94.9"
                    // },
                    // {
                    //   id: 6,
                    //   index: 6,
                    //   name: "科技幼儿园",
                    //   fynum: "4",
                    //   snum: "856",
                    //   cynum: "237",
                    //   dbnum: "225",
                    //   dbl: "94.9"
                    // },
                    // {
                    //   id: 7,
                    //   index: 7,
                    //   name: "科技幼儿园",
                    //   fynum: "4",
                    //   snum: "856",
                    //   cynum: "237",
                    //   dbnum: "225",
                    //   dbl: "94.9"
                    // },
                    // {
                    //   id: 8,
                    //   index: 8,
                    //   name: "科技幼儿园",
                    //   fynum: "4",
                    //   snum: "856",
                    //   cynum: "237",
                    //   dbnum: "225",
                    //   dbl: "94.9"
                    // },
                    // {
                    //   id: 9,
                    //   index: 9,
                    //   name: "科技幼儿园",
                    //   fynum: "4",
                    //   snum: "856",
                    //   cynum: "237",
                    //   dbnum: "225",
                    //   dbl: "94.9"
                    // }
                ],
                tabData: {
                    ysnum: "",
                    fynum: "",
                    bjnum: "",
                    xsnum: ""
                },
                womanNum: "",
                man: "",
                womanNumP: "",
                manNumP: "",
                dbNum: "",
                zbNum: "",
                xbNum: "",
                tbNum: "",
                dbNumP: "",
                zbNumP: "",
                xbNumP: "",
                tbNumP: "",
                xszNum: "",
                aggData: {
                    oneNum: "",
                    twoNum: "",
                    thereNum: "",
                    fourNum: "",
                    zsNum: ""
                },
                weakData: {

                    zsNum: ""
                },
                Svalue: [],
                goToSchool: [],
                goOutSchool: [],
                fpArr:[],
                dbArr:[],
                schoolData:{
                    Name:"",
                    dbl:"",
                    SNum:"",
                    pjH:""
                }
            };
        },

        mounted() {
            window.addEventListener("resize", this.setFontsize);
            this.setFontsize()
            const yesterday = this.getYesterdayDate();

            this.yesterday = yesterday.toISOString().split('T')[0]
            this.getYearMonthDay();
            this.getDate();
            setInterval(() => {
                this.currentDate();

            }, 1000)
            this.$nextTick(() => {
                let loop1 = true

                if (this.tableList.length < 10) {
                    loop1 = false
                }

                this.swiper = new Swiper("#toDo-main", {
                    initialSlide: 0,
                    slidesPerView: 7,
                    autoplay: {//自动滑动
                        stopOnLastSlide: false,
                        delay: 2000,//5秒切换一次
                        disableOnInteraction: false
                    },
                    direction: 'vertical',
                    grabCursor: true,
                    autoplayDisableOnInteraction: false,
                    autoHeight: false,
                    observer: true,
                    observeParents: true,
                    speed: 1000,
                    loop: loop1
                });


            })
            this.myChart1 = echarts.init(document.getElementById("echart-div1"));
            this.myChart2 = echarts.init(document.getElementById("echart-div2"));
            this.myChart3 = echarts.init(document.getElementById("echart-div3"));
            this.myChart4 = echarts.init(document.getElementById("echart-div4"));
            this.myChart5 = echarts.init(document.getElementById("echart-div5"));
            this.myChart6 = echarts.init(document.getElementById("echart-div6"));
            window.onresize=(()=>{
                this.changeSize()

            })

            this.getData()
            this.getData2()
            this.getData3()
            this.getData4()
            this.getData5()
            // this.getData6()
            this.getData7()
            this.getData8()
            this.getData9()
        },

        computed: {
            weekDay() {
                let days = [
                    "星期日",
                    "星期一",
                    "星期二",
                    "星期三",
                    "星期四",
                    "星期五",
                    "星期六",
                ];
                let today = new Date();
                let weekday = today.getDay();
                return days[weekday];
            },
        },
        methods: {
            handelGotoS(id){
                window.location.href = '/admin/databoard/daping?id='+ id
            },
            mouseoverYuandian(id,val){
                // clearTimeout(this.aaa())
                // console.log(id)
                // const yesterday = "2024-09-10"
                axios({
                    method: "post",
                    url: window.bdaUrl,
                    data: {
                        action: window.action,
                        name: 'hw_mdysxxxx',
                        qs: JSON.stringify({ "4": id,"5":this.yesterday }),
                    },
                    headers: {
                        'Content-type': 'application/x-www-form-urlencodeed'
                    }
                }).then(res => {
                    console.log(res.data.data)
                    if(res.data.data.length !=0){
                        this.schoolData.Name=res.data.data[0][6]
                        this.schoolData.SNum=res.data.data[0][7]
                        this.schoolData.dbl=res.data.data[0][8]
                        this.schoolData.pjH=res.data.data[0][9]
                        this.schoolData.img=res.data.data[0][10]
                    }
                    this.activeShow = val
                }, err => {
                    console.log(err)
                })
            },
            getData9() {
                axios({
                    method: "post",
                    url: window.bdaUrl,
                    data: {
                        action: window.action,
                        name: 'hw_fplhdblv',
                    },
                    headers: {
                        'Content-type': 'application/x-www-form-urlencodeed'
                    }
                }).then(res => {
                    this.fpArr =[res.data.data[0][2],res.data.data[0][3],res.data.data[0][4],res.data.data[0][5],res.data.data[0][6],res.data.data[0][7],res.data.data[0][8]]
                    this.dbArr=[0,0,0,0,0,0,res.data.data[0][9]]
                    this.getEchartData6();

                }, err => {
                    console.log(err)
                })
            },
            getData8() {
                axios({
                    method: "post",
                    url: window.bdaUrl,
                    data: {
                        action: window.action,
                        name: 'hw_sldclhhddblv',
                    },
                    headers: {
                        'Content-type': 'application/x-www-form-urlencodeed'
                    }
                }).then(res => {
                    this.goToSchool = [res.data.data[0][6], res.data.data[0][7], res.data.data[0][8], res.data.data[0][9]]
                    this.goOutSchool = [res.data.data[0][2], res.data.data[0][3], res.data.data[0][4], res.data.data[0][5]]
                    this.getEchartData5();

                }, err => {
                    console.log(err)
                })
            },
            getData7() {
                // const yesterday = "2024-09-10"
                axios({
                    method: "post",
                    url: window.bdaUrl,
                    data: {
                        action: window.action,
                        name: 'hw_dblphb',
                        qs: JSON.stringify({ "5": this.yesterday }),
                    },
                    headers: {
                        'Content-type': 'application/x-www-form-urlencodeed'
                    }
                }).then(res => {
                    if (res.data.data != 0) {
                        const arrList = res.data.data
                        const list = arrList.sort((a, b) => {
                            const val1 = +(a[11])
                            const val2 = +(b[11])
                            return val2 - val1
                        })
                        // console.log(list)
                        this.tableList = list
                    }


                }, err => {
                    console.log(err)
                })
            },
            // getData6() {
            //   const yesterday = "2024-09-10"
            //   axios({
            //     method: "post",
            //     url: window.bdaUrl,
            //     data: {
            //       action: window.action,
            //       name: 'hw_mdysxxxx',
            //       qs: JSON.stringify({ "4": '040121021',"5":yesterday }),
            //     },
            //     headers: {
            //       'Content-type': 'application/x-www-form-urlencodeed'
            //     }
            //   }).then(res => {


            //   }, err => {
            //     console.log(err)
            //   })
            // },
            getData5() {
                axios({
                    method: "post",
                    url: window.bdaUrl,
                    data: {
                        action: window.action,
                        name: 'hw_trertsj'
                    },
                    headers: {
                        'Content-type': 'application/x-www-form-urlencodeed'
                    }
                }).then(res => {

                    this.weakData.zsNum = res.data.data[0][2]
                    this.Svalue = [res.data.data[0][3], res.data.data[0][4], res.data.data[0][5],res.data.data[0][6]]
                    this.getEchartData4();

                }, err => {
                    console.log(err)
                })
            },
            getData4() {
                axios({
                    method: "post",
                    url: window.bdaUrl,
                    data: {
                        action: window.action,
                        name: 'hw_school_xsnlfb'
                    },
                    headers: {
                        'Content-type': 'application/x-www-form-urlencodeed'
                    }
                }).then(res => {
                    this.aggData.oneNum = res.data.data[0][6]
                    this.aggData.twoNum = res.data.data[0][5]
                    this.aggData.thereNum = res.data.data[0][4]
                    this.aggData.fourNum = res.data.data[0][3]
                    this.aggData.zsNum = res.data.data[0][2]
                    this.getEchartData3();

                }, err => {
                    console.log(err)
                })
            },
            getData3() {
                axios({
                    method: "post",
                    url: window.bdaUrl,
                    data: {
                        action: window.action,
                        name: 'hw_student_baseinfo'
                    },
                    headers: {
                        'Content-type': 'application/x-www-form-urlencodeed'
                    }
                }).then(res => {
                    this.xszNum = res.data.data[0][2]
                    this.womanNum = res.data.data[0][3]
                    this.manNum = res.data.data[0][4]
                    this.womanNumP = res.data.data[0][5]
                    this.manNumP = res.data.data[0][6]
                    this.dbNum = res.data.data[0][7]
                    this.zbNum = res.data.data[0][8]
                    this.xbNum = res.data.data[0][9]
                    this.tbNum = res.data.data[0][10]
                    this.dbNumP = res.data.data[0][11]
                    this.zbNumP = res.data.data[0][12]
                    this.xbNumP = res.data.data[0][13]
                    this.tbNumP = res.data.data[0][14]
                    console.log(res.data.data)
                    this.getEchartData();
                    this.getEchartData2();

                }, err => {
                    console.log(err)
                })
            },
            getData2() {
                axios({
                    method: "post",
                    url: window.bdaUrl,
                    data: {
                        action: window.action,
                        name: 'hw_qdblpjsc',
                        qs: JSON.stringify({ "3": this.yesterday }),
                    },
                    headers: {
                        'Content-type': 'application/x-www-form-urlencodeed'
                    }
                }).then(res => {


                    if (res.data.data.length != 0) {
                        this.tabData.dbnum =res.data.data[0][4]
                        this.tabData.pjnum = res.data.data[0][5]
                    }else{
                        this.tabData.dbnum = 0
                        this.tabData.pjnum = 0
                    }

                    // console.log(res.data.data[0][2])

                }, err => {
                    console.log(err)
                })
            },
            getData() {
                axios({
                    method: "post",
                    url: window.bdaUrl,
                    data: {
                        action: window.action,
                        name: 'hw_baseinfo'
                    },
                    headers: {
                        'Content-type': 'application/x-www-form-urlencodeed'
                    }
                }).then(res => {
                    this.tabData.ysnum = res.data.data[0][2]
                    this.tabData.fynum = res.data.data[0][3]
                    this.tabData.bjnum = res.data.data[0][4]
                    this.tabData.xsnum = res.data.data[0][5]
                    // console.log(res.data.data[0][2])

                }, err => {
                    console.log(err)
                })
            },

            aaa() {
                // console.log(99999)
                setTimeout(() => {
                    this.activeShow= 0
                    this.schoolData={}
                },400)
            },

            getEchartData6() {
                option = {
                    backgroundColor: 'transparent',

                    color: ['#ef1e5f', '#f26315', '#ffd200', '#00fd9b', '#fff333', '#2566ff', '#842af0'],

                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: '#003D78',
                        borderColor: '#003D78',
                        textStyle: {
                            color: '#fff'

                        },
                        formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%',
                    },
                    legend: {
                        // icon:'rect',
                        // itemWidth: 5,
                        itemHeight: 8,
                        align: "left",
                        right: '10%',
                        top: '4%',
                        bottom: '0%',
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10,
                        height: 60,
                        width: '100%',
                        data: ['达标率', '肥胖率'],
                        selectedMode: false,
                        icon: 'circle',
                        itemGap: 25,
                        itemWidth: 16,
                        textStyle: {
                            color: '#fff',
                            padding: 8,
                            fontSize: 14,
                        }
                    },
                    grid: {
                        left: '4%',
                        right: '3%',
                        bottom: '4%',
                        top: '13%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                type: 'solid',
                                color: '#fff'
                            }
                        },
                        data: ['2021第一学期','2021第二学期','2022第一学期', '2022第二学期', '2023第一学期', '2023第二学期', '2024第一学期', '2024第二学期'],
                        axisLabel: {
                            color: '#fff',

                            // interval: 0,
                            textStyle: {
                                fontSize: 13
                            },
                            formatter: function (value) {
                                let len = value.length;
                                let length = 4; //控制一行显示个数
                                let num = Math.ceil(len / length);//循环次数
                                if (num > 1) {
                                    let str = '';
                                    for (let i = 0; i < num; i++) {
                                        str += value.substring(i * length, (i + 1) * length) + '\n';
                                    }
                                    return str;
                                } else {
                                    return value;
                                }
                            }
                        },
                        // axisPointer: {
                        //   show: true
                        // },

                        axisTick: {
                            show: false
                        },
                        position: 'bottom',
                        offset: 20,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#264971',
                                // type:"solid"
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#fff',

                            }
                        },
                        axisLabel: {
                            margin: 20,
                            formatter:"{value} %",
                            textStyle: {
                                fontSize: 14,
                                color: '#fff',

                            }
                        },

                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',

                                color: '#264971'
                            }
                        }
                    }],
                    // '#ef1e5f', '#f26315', '#01c8e9', '#00fd9b',
                    series: [
                        {
                            name: '达标率',
                            showSymbol: false,
                            type: 'line',
                            data: this.dbArr,
                            itemStyle: {
                                color: '#FF8924',
                                borderColor: 0,
                                borderWidth: 0,
                                borderType: 'solid',
                                // shadowColor: '#ef1e5f',
                                shadowBlur: 5
                            },
                            lineStyle: {
                                color: '#FF8924',
                                width: 3,
                            },

                        },
                        {
                            name: '肥胖率',
                            showSymbol: false,

                            type: 'line',
                            data: this.fpArr,
                            itemStyle: {
                                color: '#00FCFF',
                                borderColor: 0,
                                borderWidth: 0,
                                borderType: 'solid',
                                // shadowColor: '#ffd200',
                                shadowBlur: 5
                            },
                            lineStyle: {
                                color: '#00FCFF',
                                width: 3,

                            }
                        }
                    ]
                };

                this.myChart6.setOption(option);
            },
            getEchartData5() {
                let xLabel = ['第一季度', '第二季度', '第三季度', '第四季度']
                goToSchool = this.goToSchool //达标率
                goOutSchool = this.goOutSchool //低常率

                option = {
                    backgroundColor: 'transparent',
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: '#003D78',
                        borderColor: '#003D78',
                        textStyle: {
                            color: '#fff'

                        },
                        formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%',

                        axisPointer: {
                            lineStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(126,199,255,0)' // 0% 处的颜色
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(126,199,255,1)' // 100% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(126,199,255,0)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            },
                        },


                    },
                    legend: {
                        // triggerOn: 'none',
                        selectedMode: false,
                        align: "left",
                        right: '10%',
                        top: '5%',
                        bottom: '0%',
                        type: 'plain',
                        textStyle: {
                            color: '#fff',
                            fontSize: 13,
                            padding: 8,
                        },
                        icon: 'circle',
                        itemGap: 25,
                        itemWidth: 8,

                        data: [
                            {
                                name: '达标率'
                            },
                            {
                                name: '低常率'
                            }
                        ]
                    },
                    grid: {
                        top: '20%',
                        left: '10%',
                        right: '10%',
                        bottom: '15%',
                        containLabel: false
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        axisLine: { //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                type: 'solid',
                                color: '#fff'
                            },
                        },
                        axisLabel: { //坐标轴刻度标签的相关设置

                            textStyle: {


                                color: '#fff',
                                padding: 16,
                                fontSize: 14
                            },
                            formatter: function (data) {
                                return data
                            }
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: 'red'
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        data: xLabel
                    }],
                    yAxis: [{
                        // name: '%',
                        nameTextStyle: {
                            color: "#fff",
                            fontSize: 16,
                            padding: 5
                        },
                        min: 0,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#24446A',
                                type: 'dashed'
                            },
                        },
                        axisLine: {
                            show: false,

                            lineStyle: {
                                color: "#233653"
                            }

                        },
                        axisLabel: {
                            show: true,
                            formatter:"{value} ",
                            textStyle: {
                                color: '#fff',
                                padding: 5
                            },
                            formatter: function (value) {
                                if (value === 0) {
                                    return value + '%'
                                }
                                return value + '%'
                            }
                        },
                        axisTick: {
                            show: false,
                        },
                    }],
                    series: [{
                        name: '达标率',
                        type: 'line',
                        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                        showAllSymbol: true,
                        symbolSize: 0,
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 2,
                                color: "#1B88FF", // 线条颜色
                            },
                            borderColor: 'rgba(0,0,0,.4)',
                        },
                        itemStyle: {
                            color: "#1B88FF",
                            borderColor: "#646ace",
                            borderWidth: 2

                        },
                        tooltip: {
                            show: true
                        },
                        areaStyle: { //区域填充样式
                            normal: {
                                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "#375B81"


                                },
                                    {
                                        offset: 1,
                                        color: "#85B3EE"
                                    }
                                ], false),
                                shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
                                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                            }
                        },
                        data: goToSchool
                    }, {
                        name: '低常率',
                        type: 'line',
                        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                        showAllSymbol: true,
                        symbolSize: 0,
                        smooth: true,
                        lineStyle: {
                            normal: {
                                width: 2,
                                color: "#FF8800", // 线条颜色
                            },
                            // borderColor: 'rgba(0,0,0,.4)',
                        },
                        itemStyle: {
                            color: "#FF8800",
                            // borderColor: "#646ace",
                            borderWidth: 2

                        },
                        tooltip: {
                            show: true
                        },
                        areaStyle: { //区域填充样式
                            normal: {
                                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "#FF8800"


                                },
                                    {
                                        offset: 1,
                                        color: "rgba(255,255,255,0.2)"
                                    }
                                ], false),
                                shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
                                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                            }
                        },
                        data: goOutSchool
                    }]
                };


                this.myChart5.setOption(option);
            },
            getEchartData4() {
                // var Svalue = [269, 299, 311, 248, 265];
                var max1 = Math.max.apply(null, this.Svalue) ;
                var data1 = [];
                console.log(this.Svalue)
                // data1存放背景条的数值，for循环使其数量与value一致
                for (var i = this.Svalue.length - 1; i >= 0; i--) {
                    data1.push(max1);
                }

                option = {
                    backgroundColor: "transparent",
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'none'
                        },
                        formatter: function(params) {
                            return params[0].name  + ' : ' + params[0].value
                        }
                    },
                    // tooltip: {
                    //   trigger: "item",
                    //   backgroundColor: "rgba(44, 78, 155, 0.8)",
                    //   borderWidth: 0,
                    //   textStyle: {
                    //     color: "#fff",
                    //     fontSize: "0.4rem",
                    //   },
                    // },
                    grid: {
                        left: "5%",
                        top: "2%",
                        bottom: "5%",
                        right: "5%",
                        containLabel: true,
                    },
                    xAxis: {
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                    },
                    yAxis: {
                        axisTick: "none",
                        axisLine: "none",
                        offset: "10",
                        axisLabel: {
                            textStyle: {
                                color: "#ffffff",
                                fontSize: "13",
                            },
                        },
                        data: ["大班", "中班", "小班","托班"],
                    },
                    series: [
                        {
                            //真实数值的条形图主体
                            // name: "条",
                            type: "bar",
                            stack: "圆",
                            yAxisIndex: 0,
                            animation: false,
                            barWidth: "5%",
                            barGap: "10%",
                            label: {
                                show: false,
                                position: "insideLeft",
                                // padding: [50, 0, 0, -50],
                                distance: 15,
                                //color: co1,
                            },

                            itemStyle: {
                                normal: {
                                    color: {
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        colorStops: [
                                            {
                                                offset: 1,
                                                color: "rgba(65, 163, 255,1)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 0,
                                                color: "rgba(65, 163, 255, 0.1)", // 100% 处的颜色
                                            },
                                        ],
                                    },
                                },
                            },
                            data: this.Svalue,
                        },
                        {
                            //辅助1：真实数值的圆点
                            // name: "真实值圆点",
                            type: "scatter",
                            symbolOffset: ["10%", "0"],
                            symbolSize: 5,
                            itemStyle: {
                                borderWidth: 0,
                                color: "rgba(65, 163, 255,1)",
                            },
                            data: this.Svalue,
                            z: 5,
                        },
                        {
                            //辅助2：真实数值的圆点外侧圆环
                            // name: "真实值圆环",
                            type: "scatter",
                            symbolOffset: ["10%", "0"],
                            symbolSize: 7,
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: "rgba(65, 163, 255,0.5)",
                                shadowBlur: 15,
                                shadowColor: "rgba(65, 163, 255,1)",
                                // color: "#F8E908",
                            },
                            data: this.Svalue,
                            z: 10,
                        },
                        {
                            //辅助3：背景条
                            // name: "背景条",
                            type: "bar",
                            animation: true,
                            barGap: "-100%",
                            barWidth: "8%",
                            barBorderRadius: "5%",
                            position:['220','0'],
                            label: {
                                show: true,
                                position: "insideRight",
                                verticalAlign: 'right',
                                padding: [-8, -38, 0, 0],
                                distance: 15,
                                color: "#fff",
                                formatter: ((params) => {
                                    return " " + this.Svalue[params.dataIndex];

                                })

                            },
                            itemStyle: {
                                normal: {
                                    color: "RGBA(64, 70, 73, 1)",
                                },
                            },
                            data: data1,
                            z: 0,
                        },
                    ],
                };

                this.myChart4.setOption(option);


            },
            getEchartData3() {
                let color = ["#3095FA", "#1DDA7A", "#F6C864", "#EF5A73",]

                var data = [
                        {
                            value: this.aggData.fourNum,
                            name: '4-5'
                        },
                        {
                            value: this.aggData.thereNum,
                            name: '3-4'
                        },
                        {
                            value: this.aggData.twoNum,
                            name: '2-3',
                        },

                        {
                            value: this.aggData.oneNum,
                            name: '5-6'
                        }
                    ],

                    option = {
                        backgroundColor: "transparent",

                        grid: {
                            left: -100,
                            top: 10,
                            bottom: 30,
                            right: 10,
                            containLabel: true
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{b} : {c} 人"
                        },

                        calculable: true,
                        series: [{
                            type: 'pie',
                            radius: ["80%", "81%"],
                            hoverAnimation: false,
                            labelLine: {
                                normal: {
                                    show: false,
                                    length: 30,
                                    length2: 55
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            name: "",
                            data: [{
                                name: '',
                                value: 0,
                                itemStyle: {
                                    normal: {
                                        color: "#3093F5"
                                    }
                                }
                            }]
                        }, {
                            stack: 'a',
                            type: 'pie',
                            radius: ['30%', '70%'],
                            roseType: 'area',
                            zlevel: 10,
                            label: {
                                show: true,
                                position: 'outside',
                                formatter: '{b|{b}岁}:\n{c|{c}人}',
                                // formatter: (params) => {
                                //   // let lable =
                                //   console.log(this)
                                //     return  `${rich.a}|{rich.b}：\n${rich.c}人\n${rich.hr}`
                                // },
                                rich: {
                                    hr: {

                                        backgroundColor: 'auto',
                                        borderRadius: 3,
                                        width: 3,
                                        height: 3,
                                        padding: [3,3, -12, -12]
                                    },
                                    a: {
                                        padding: [-20, 15, -8, 12],
                                        fontSize: 15,
                                        // lineHeight:40,
                                        // color:
                                    },
                                    b: {
                                        fontSize: 15,
                                        // lineHeight: 30,
                                        // fontWeight: 'bold',
                                        color: '#fff',
                                    },
                                    c: {
                                        fontSize: 15,
                                        color: 'auto',
                                    },

                                },


                                emphasis: {
                                    show: true
                                }
                            },
                            labelLine: {

                                normal: {
                                    show: true,
                                    length: 30,
                                    length2: 20,
                                    lineStyle: {
                                        width: 2
                                    }
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            data: data.map((item, index) => {
                                item.label = {
                                    color: color[index]
                                }
                                console.log(item.label)

                                return item
                            },)

                        },]
                    }
                this.myChart3.setOption(option);
            },
            getEchartData2() {
                const data = [
                    {
                        name: "大班",
                        value: this.dbNum,
                        // value2:this.dbNumP
                        percent: this.dbNumP,
                    },
                    {
                        name: "中班",
                        value: this.zbNum,
                        percent: this.zbNumP,
                    },
                    {
                        name: "小班",
                        value: this.xbNum,
                        percent: this.xbNumP,
                    },
                    {
                        name: "托班",
                        value: this.tbNum,
                        percent: this.tbNumP,
                    },
                ];
                var dataStyle = {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        shadowBlur: 10,
                        borderWidth: 10,
                        shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
                    },
                };
                var placeHolderStyle = {
                    normal: {
                        color: "transparent",
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: true,
                            color: "#fff",
                        },
                    },
                    emphasis: {
                        // color: "red",
                    },
                };
                option = {
                    backgroundColor: "transparent",

                    tooltip: {
                        trigger: "item",
                        show: true,
                        formatter: "{b} : <br/>{c}%",

                        backgroundColor: "#fff", // 背景
                        padding: [5, 10], //内边距
                        color: "#fff",
                        extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
                    },
                    legend: {
                        orient: "vertical",
                        icon: "circle",
                        left: "18%",
                        bottom: "10%",
                        // centert:['50%','20%'],
                        itemGap: 6,
                        data: data.map((item) => item.name),
                        formatter: (name) => {
                            return (
                                // {name|' + item.name + '}
                                "{name|" +
                                name +
                                "}    {value|" +
                                data.find((item) => {
                                    return item.name == name;
                                }).value +
                                "}   {percent|" +
                                data.find((item, index) => {
                                    return item.name == name;
                                }).percent +
                                "%" +
                                "}"
                            );
                        },
                        textStyle: {
                            color: "rgba(255, 255, 255, .6)", //元字颜色
                            rich: {
                                name: {
                                    color: "#fff",
                                    fontSize: 13,
                                },
                                percent: {
                                    fontSize: 13,
                                    color: "#fff",
                                },
                                value: {
                                    color: "#fff",
                                    fontSize: 13,
                                },
                            },
                        },
                    },
                    series: [
                        {
                            name: "Line 1",
                            type: "pie",
                            clockWise: false,
                            radius: [50, 58],
                            center: ["50%", "26%"],
                            itemStyle: dataStyle,
                            hoverAnimation: false,
                            startAngle: 90,
                            label: {
                                borderRadius: "10",
                            },
                            data: [
                                {
                                    value:this.dbNumP,
                                    name: "大班",
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(
                                                0,
                                                0,
                                                0,
                                                1,
                                                [
                                                    {
                                                        offset: 0,
                                                        color: "#2F96FB",
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: "#2F96FB",
                                                    },
                                                ]
                                            ),
                                        },
                                    },
                                },
                                {
                                    value: 10,
                                    name: "",
                                    tooltip: {
                                        show: false,
                                    },
                                    itemStyle: placeHolderStyle,
                                },
                            ],
                        },
                        {
                            name: "Line 1",
                            type: "pie",
                            clockWise: false,
                            radius: [35, 44],
                            center: ["50%", "26%"],
                            itemStyle: dataStyle,
                            hoverAnimation: false,
                            startAngle: 90,
                            label: {
                                borderRadius: "10",
                            },
                            data: [
                                {
                                    value: this.zbNumP,
                                    name: "中班",
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(
                                                0,
                                                0,
                                                0,
                                                1,
                                                [
                                                    {
                                                        offset: 0,
                                                        color: "#FFA108",
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: "#FFA108",
                                                    },
                                                ]
                                            ),
                                        },
                                    },
                                },
                                {
                                    value: 45.4,
                                    name: "",
                                    tooltip: {
                                        show: false,
                                    },
                                    itemStyle: placeHolderStyle,
                                },
                            ],
                        },
                        {
                            name: "Line 2",
                            type: "pie",
                            clockWise: false,
                            radius: [23, 29],
                            center: ["50%", "26%"],
                            itemStyle: dataStyle,
                            hoverAnimation: false,
                            startAngle: 90,
                            data: [
                                {
                                    value: this.xbNumP,
                                    name: "小班",
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(
                                                0,
                                                0,
                                                0,
                                                1,
                                                [
                                                    {
                                                        offset: 0,
                                                        color: "#1DDA7A",
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: "#1DDA7A",
                                                    },
                                                ]
                                            ),
                                        },
                                    },
                                },
                                {
                                    value: 43.3,
                                    name: "",
                                    tooltip: {
                                        show: false,
                                    },
                                    itemStyle: placeHolderStyle,
                                },
                            ],
                        },
                        {
                            name: "Line 3",
                            type: "pie",
                            clockWise: false,
                            radius: [10, 15],
                            center: ["50%", "26%"],
                            itemStyle: dataStyle,
                            hoverAnimation: false,
                            startAngle: 10,
                            data: [
                                {
                                    value: this.tbNumP,
                                    name: "托班",
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(
                                                0,
                                                0,
                                                0,
                                                1,
                                                [
                                                    {
                                                        offset: 0,
                                                        color: "#D83778",
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: "#D83778",
                                                    },
                                                ]
                                            ),
                                        },
                                    },
                                },
                                {
                                    value: 0,
                                    name: "",
                                    tooltip: {
                                        show: false,
                                    },
                                    itemStyle: placeHolderStyle,
                                },
                            ],
                        },
                    ],
                };
                this.myChart2.setOption(option);
            },
            getEchartData() {
                let color = ["#2F96FB", "#D83778"];
                data = [
                    {
                        name: "男",
                        value: this.manNum,
                    },
                    {
                        name: "女",
                        value: this.womanNum,
                    },
                ];

                option = {
                    title: {
                        left: "40%",
                        top: "center",
                        itemGap: 0,
                        textStyle: {
                            color: "#FFFFFF",
                            fontSize: "18",
                            fontWeight: 400,
                        },
                        subtextStyle: {
                            color: "rgba(255, 255, 255, 0.4)",
                            fontSize: "12",
                            fontWeight: 400,
                            lineHeight: "30",
                        },
                    },
                    tooltip: {
                        trigger: "item",
                        show: true,
                        formatter: "{b} : <br/>{d}%",
                        backgroundColor: "#fff", // 背景
                        padding: [5, 10], //内边距
                        color: "#fff",
                        extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
                    },
                    color: color,
                    backgroundColor: "transparent",

                    series: [
                        {
                            type: "pie",
                            radius: ["38%", "60%"],
                            center: ["40%", "30%"],
                            roseType: "radius",
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: true,
                                length: 1,
                                length2: 20,
                                smooth: true,
                            },
                            data: data,
                        },
                    ],
                };

                this.myChart1.setOption(option);
            },
            getDate() {
                const dateObj = new Date();
                const year = dateObj.getFullYear();
                const month = String(dateObj.getMonth() + 1).padStart(2, "0");
                const day = String(dateObj.getDate()).padStart(2, "0");
                this.formattedDate = `${year}-${month}-${day}`;
                console.log(this.formattedDate);
            },
            getYearMonthDay() {
                const today = new Date();
                // 获取当前时间(today)的年份
                const year = today.getFullYear();
                // 获取月份
                const month = String(today.getMonth() + 1).padStart(2, "0");
                // 获取当前日
                const day = String(today.getDate()).padStart(2, "0");
                // 得到年月日
                this.YearMonthDay = `${year}-${month}-${day}`; //打印当前日期
            },
            //获取时分秒的方法
            currentDate() {
                var d = new Date();
                var year = d.getFullYear();
                var month = d.getMonth();
                month = month + 1 > 12 ? 1 : month + 1;
                month = month > 9 ? month : "0" + month.toString();
                var day = d.getDate();
                var hour = d.getHours();
                hour = hour > 9 ? hour : "0" + hour.toString();
                var minute = d.getMinutes();
                minute = minute > 9 ? minute : "0" + minute.toString();
                var second = d.getSeconds();
                second = second > 9 ? second : "0" + second.toString();
                this.HourMiniterSeconds = `${hour}:${minute}:${second}`;
            },
            getYesterdayDate() {
                const today = new Date();
                const yesterday = new Date(today);
                yesterday.setDate(yesterday.getDate() - 1);
                return yesterday;
            },
            changeSize(){
                this.myChart1.resize()
                this.myChart2.resize()
                this.myChart3.resize()
                this.myChart4.resize()
                this.myChart5.resize()
                this.myChart6.resize()
            },
            setFontsize() {
                const docEl = document.documentElement;
                const clientWidth = window.innerWidth || docEl.clientWidth || document.body.clientWidth;
                if (!clientWidth) return;
                const fontSize = 100 * (clientWidth / 1920);
                document.documentElement.style.fontSize = fontSize + "px";
            },
        },
    });
</script>
</body>

</html>
